<template>
  <el-form :model="form" label-width="auto" style="max-width: 600px" ref="formRef" :rules="rules">
    <el-form-item label="姓名" prop="name">
      <el-input v-model="form.name" />
    </el-form-item>

    <el-form-item label="城市" prop="city">
      <el-select v-model="form.city" placeholder="选择城市" >
        <el-option label="武汉" value="武汉" />
        <el-option label="深圳" value="深圳" />
        <el-option label="南京" value="南京" />
        <el-option label="北京" value="北京" />
      </el-select>
    </el-form-item>

    <el-form-item label="技术栈" prop="jsz">
      <el-select v-model="form.jsz" placeholder="选择技术栈" multiple>
        <el-option label="鸿蒙" value="鸿蒙" />
        <el-option label="安卓" value="安卓" />
        <el-option label="ios" value="ios" />
        <el-option label="RN" value="RN" />
        <el-option label="JAVA" value="JAVA" />
        <el-option label="C" value="C" />
      </el-select>
    </el-form-item>

    <el-form-item label="评价" prop="pj">
      <el-input v-model="form.pj" />
    </el-form-item>

    <el-form-item label="面试评价" prop="mspj">
      <el-select v-model="form.mspj" placeholder="选择面试评价">
        <el-option label="直接投递" value="直接投递" />
        <el-option label="需要培训" value="需要培训" />
        <el-option label="不通过" value="不通过" />
      </el-select>
    </el-form-item>

    <el-form-item label="问题" prop="wt">
      <el-input v-model="form.wt" type="textarea" :rows="10" />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSubmit(formRef)">生成面试反馈数据</el-button>
      <el-button @click="clear">重新生成面试问题</el-button>
      <el-button @click="resetForm(formRef)">清空</el-button>
    </el-form-item>
  </el-form>


  <el-input v-model="res" type="textarea" :rows="10" />
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'

onMounted(() => {
  clear()
})

const wtList = reactive([
  '@prop和@link有什么区别? 回答',
  '跨组件通信装饰器使用的是什么? 回答',
  'UIAbility的生命周期有哪些? 回答',
  'Navigation和router二者有啥区别? 回答',
  'UIAbility启动模式有哪些? 回答',
  'webView与H5，H5如何调用原生的方法? 回答',
  'hap、har、hsp区别? 回答',
  '持久化存储的方式有哪些? 回答',
  '三层架构设计？优缺点是啥? 回答',
  '深层次数组对象数据中，页面丢失响应式，使用什么装饰器来处理? 回答',
  '组件生命周期有哪些? 回答',
  'if条件渲染和visibility属性控制组件的显隐有什么区别? 回答',
  '热启动的生命周期流程? 回答',
  'AppStorage和LocalStorage的区别是什么? 回答',
  'LazyForEach的工作原理是什么? 回答',
  '多线程实现方式TaskPoll和Worker的区别? 回答',
  '用过线程通信吗，线程是怎么进行通信的? 回答',
])

const formRef = ref<FormInstance>()

const res = ref('')
const res1 = ref('')

const form = reactive<{
  name: string,
  city: string,
  jsz: string[],
  mspj: string[],
  pj: string,
  wt: string,
}>({
  name: '',
  city: '',
  jsz: [],
  mspj: [],
  pj: '',
  wt: ''
})

const validatePj = (rule: any, value: any, callback: any) => {
  console.log('pj'+value)
  if (value === '技术掌握,沟通能力') {
    callback(new Error('注意修改默认内容'))
  } else {
    if (form.pj !== '') {
      if (!formRef.value) return
      formRef.value.validateField('checkPass')
    }
    callback()
  }
}

const validateWt = (rule: any, value: any, callback: any) => {
  console.log('wt'+value)
  if (value === res1.value) {
    callback(new Error('注意修改默认内容'))
  } else {
    if (form.wt !== '') {
      if (!formRef.value) return
      formRef.value.validateField('checkPass')
    }
    callback()
  }
}

const rules = reactive<FormRules<typeof form>>({
  name: [{
    required: true,
    message: '必填',
  }],
  city: [{
    required: true,
    message: '必填',
  }],
  jsz: [{
    required: true,
    message: '必填',
  }],
  mspj: [{
    required: true,
    message: '必填',
  }],
  pj: [{ validator: validatePj }],
  wt: [{ validator: validateWt }],
})

const clear = () => {
  const shuffled = [...wtList].sort(() => 0.5 - Math.random());
  const arr = shuffled.slice(0, 5)
  let result = "";
  for (let i = 0; i < arr.length; i++) {
    result += `${i + 1}. ${arr[i]}\n`;
  }
  form.wt = result
  res1.value = result
  form.pj = '技术掌握,沟通能力'
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  clear()
  res.value = ''
}

const onSubmit = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      res.value = `(${form.city}) ${form.name} ${form.jsz.map((item) => {
        return item
      })}(${form.pj + ',' + form.mspj})\n${form.wt}`
    } else {
      console.log('error submit!' + valid)
    }
  })
}
</script>
